// out: ../css/
@import './base';
@vw:3.75vw;
body{
    background-color: #f9fafb;
}
//头部
header{
    left: 0;
    top: 0;
    position: fixed;
    background-color: white;
    padding: 0(15/@vw);
    align-items: center;
    justify-content: space-between;
    display: flex;
    width: 100%;
    height: (50/@vw);
    .left{
        width: (235/@vw);
        height: (50/@vw);
        background-image: url(../assets/head.png);
        background-size: contain;
        background-repeat: no-repeat;
    }
    a{
        font-size: (14/@vw);
        border-radius: (15/@vw);
        text-align: center;
        line-height: (30/@vw);
        height: (30/@vw);
        width: (80/@vw);
        background-color: #ffe31b;
    }
}
// 搜索
.search{
    margin-top: (50/@vw);
    height: (52/@vw);
    width: (375/@vw);
    display: flex;
    justify-content: center;
    align-items: center;
    .txt{
        font-size: (14/@vw);
        color: #a8a9a9;
        border-radius: (16/@vw);
        background-color: #f2f4f5;
        text-align: center;
        width: (345/@vw);
        line-height: (32/@vw);
    }
    .iconfont{
        font-size: (15/@vw);
    }
}
// banner
.banner{
    padding: 0(15/@vw);
    overflow: hidden;
    width: (375/@vw);
    height: (108/@vw);
    img{
        object-fit: cover;
        width: (345/@vw);
        height: (108/@vw);
        border-radius: (5/@vw);
    }
}
// 推荐歌单
.list{
    padding: 0(15/@vw);
    margin-top: (20/@vw);
    justify-content: center;
    width: (375/@vw);
    height: (389/@vw);
    .title {
        margin-bottom: (20/@vw);
        align-items: center;
        display: flex;
        justify-content: space-between;
        h4 {
            font-size: (20/@vw);
        }
        a {
            font-size: (12/@vw);
            color: #a1a4b3;
            .iconfont {
                 font-size: (12/@vw);
            }
        }
    }
    .content ul li{
        border-radius: (8/@vw);
        background-color: white;
        justify-content: space-between;
        display: flex;
        margin-bottom: (16/@vw);
        img{
            border-radius: (10/@vw);
            width: (105/@vw);
            height: (105/@vw);
        }
        .txt{
            .more{
                font-size: (14/@vw);
                color:#333;
            }
            a{
                padding: 0(5/@vw);
                color: #a1a4b3;
                font-size: (12/@vw);
                display: block;
                line-height: (22/@vw);
            }

        }
    }
}
.recommend {
    padding: 0(15/@vw);
    margin-top: (20/@vw);
    justify-content: center;
    width: (375/@vw);
    height: (360/@vw);

    .title {
        margin-bottom: (20/@vw);
        align-items: center;
        display: flex;
        justify-content: space-between;
        h4 {
            font-size: (20/@vw);
        }
        a {
            font-size: (12/@vw);
            color: #a1a4b3;
            .iconfont {
                font-size: (12/@vw);
            }
        }
    }
    .content{
        ul{
            justify-content: space-between;
            flex-wrap: wrap;
            display: flex;
            li {
                margin-bottom: (16/@vw);
                font-size: (13/@vw);
                width: (105/@vw);
                .pic{
                    position: relative;
                    img {
                        border-radius: (10/@vw);
                        width: (105/@vw);
                    }
                    .cover{
                        border-radius: 0 (10/@vw) 0 (10/@vw) ;
                        background-color: rgba(0, 0, 0, 0.8);
                        text-align: center;
                        line-height: (28/@vw);
                        height: (28/@vw);
                        width: (70/@vw);
                        bottom: 0;
                        position: absolute;
                        color: white;
                    }
                }
            }
        }
    }
}
.download{
    border-radius: (20/@vw);
    margin: 0(15/@vw);
    width: (345/@vw);
    height: (45/@vw);
    background-color: white;
    bottom: (20/@vw);
    left: (10/@vw);
    position: fixed;
    padding: 0(15/@vw);
    align-items: center;
    display: flex;
    img{
        margin-right: (10/@vw);
        width: (36/@vw);
    }
    p{
        width: (242/@vw);
        font-size: (15/@vw);
    }
    span{
        font-size: (12/@vw);
        line-height: (32/@vw);
        text-align: center;
        border-radius: 50%;
        background-color: #f2f3f5;
        width: (32/@vw);
        height: (32/@vw);
    }
}